//套餐配置

<template>
<div>
    <div class="head">
        <h3 class="h3">套餐列表：</h3>
        <el-button @click="dialogadd =true">添加</el-button>
    </div>
    <br>
    <el-table
      :data="tableData"
      style="width:auto
      height=auto">
        <el-table-column
            fixed
            prop="name"
            label="套餐"
            width="120">
        </el-table-column>
        <el-table-column
            prop="include"
            label="包含"
            width="150">
        </el-table-column>
        <el-table-column
            prop="price"
            label="价格"
            width="120">
        </el-table-column>
        <el-table-column
        prop="remark"
        label="备注"
        width="500">
        </el-table-column>
        <el-table-column
        label="操作"
        width="180">
            <template slot-scope="scope">
                <!--  scope 视为一个临时变量，用来存放父组件传递给子组件的信息，scope.调用 -->
                <el-button @click="dialogFormVisible = true">修改</el-button>
                <el-dialog title="修改" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="套餐名称" >
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="包含" >
                            <el-input v-model="form.include" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="价格" >
                            <el-input v-model="form.price" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="备注" >
                            <el-input v-model="form.remark" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary"  @click="Change(row)">确 定</el-button>
                    </div>
                </el-dialog>
                
                <el-button @click="del(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div style="margin-top: 20px">
        <el-dialog title="添加" :visible.sync="dialogadd">
            <el-form :model="form">
                <el-form-item label="套餐名称" >
                <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="包含" >
                    <el-input v-model="form.include" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="价格">
                    <el-input v-model="form.price" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" >
                    <el-input v-model="form.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogadd = false">取 消</el-button>
                <el-button type="primary" :plain="true" @click="Add()">确 定</el-button>
            </div>
        </el-dialog>
      </div>
</div>
  </template>
  
  <script>
    export default {
      data() {
        return {
  
            tableData: [{name:"套餐一",include:"棺材，灵车,火化",price:999,remark:"重生之我在艾派克斯当南通"},
                     {name:"套餐二",include:"一等棺材，灵车,火化",price:1999,remark:"重生之我在守望先锋搞网恋"},
                     {name:"套餐三",include:"二等棺材，灵车,火化",price:2999,remark:"重生之我在第五人格造永动机"},
                    {name:"套餐四",include:"至尊棺材，灵车,火化",price:2999,remark:"重生之我在彩虹六号当陀螺"},
                    ],
            dialogFormVisible: false,
            dialogadd:false,
            form: {
            name: '',
            include:'',
            price:null,
            remark:''
            },
            }
      },methods:{
        del(row){
            const index=this.tableData.indexOf(row)
            if(index!==-1){
                this.tableData.splice(index,1)
            }
            console.log("删除成功");
            this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success'
            });
        }, Change(row) {
            const index = this.tableData.indexOf(row);
                if (index !== -1) {
                // 将行数据填充到表单中
                this.form.name = this.tableData[index].name;
                this.form.include = this.tableData[index].include;
                this.form.price = this.tableData[index].price;
                this.form.remark = this.tableData[index].remark;
        }       this.form = { name: '', include: '', price: null, remark: '' }; // 清空表单数据
                // 显示修改对话框
                this.dialogFormVisible = false;
                    
    },Add() {
        if(this.form.name=='' || this.form.include==''|| this.form.price==null){
            this.$message.error('套餐名称，包含，价格不可以为空');
        }else{
            this.dialogadd = false;
            this.tableData.push({ ...this.form }); // 添加表单数据的副本
        }
        
            this.form = { name: '', include: '', price: null, remark: '' }; // 清空表单数据
        }
      }
    }
  </script>

<style lang="less" scoped>
.head{
    display: flex;
    justify-content: space-between; 
    /*弹性盒子左右对齐*/
}
</style>

